<template>
  <Popup :changeShowDialog="props.changeShowDialog">
    <template #header>
      <span class="dialog-title">{{ props.title }}</span>
    </template>
    <template #main>
      <div class="dialog-body">
        <h3>{{ props.text }}</h3>
      </div>
    </template>
    <template #footer>
      <Button
        @click.native="confirm"
        :type="'primary'"
        :style="{
          height: 40 + 'px',
          width: 160 + 'px',
          'margin-right': 20 + 'px'
        }">
        确定
      </Button>
      <Button
        @click.native="cancel"
        :type="'gray'"
        :style="{ height: 40 + 'px', width: 160 + 'px' }">
        取消
      </Button>
    </template>
  </Popup>
</template>

<script setup lang="ts">
import Popup from '@/components/popup/index.vue'
import Button from '@/components/button/index.vue'
const props = defineProps({
  changeShowDialog: Function,
  title: {
    type: String,
    default: '温馨提示'
  },
  text: {
    type: String,
    default: ''
  },
  confirmCallback: {
    type: Function,
    default: () => {}
  },
  cancelCallback: {
    type: Function,
    default: () => {}
  }
})
const confirm = () => {
  props.confirmCallback && props.confirmCallback()
  props.changeShowDialog && props.changeShowDialog()
}
const cancel = () => {
  props.cancelCallback && props.cancelCallback()
  props.changeShowDialog && props.changeShowDialog()
}
</script>

<style lang="less" scoped>
.dialog-title {
  font-size: 18px;
  font-weight: 400;
  color: #424242;
  vertical-align: middle;
}
.dialog-body {
  padding: 20px 0;
  text-align: center;
  h3 {
    color: #424242;
    line-height: 36px;
    font-size: 18px;
    font-weight: 400;
  }
}
</style>
